<template>
  <div class="subject6">
    <div class="subject-wrapper-bg">
      <img
        src="http://qiniu.whxgjt.com/dfh2/img_tb02.png"
        alt=""
        class="subject-bg"
      />
      <p class="subject-title">第六题</p>
    </div>

    <div class="subject-wrapper">
      <div class="subject">{{ subject }}</div>
      <div
        v-for="(option, index) in options"
        :key="index"
        @click="handleItem(option)"
        class="option1"
        :class="[
          option.checked && !option.corrent ? 'option-checkd' : '',
          option.checked && option.corrent == '1' ? 'option-true' : '',
          option.checked && option.corrent == '2' ? 'option-false' : '',
        ]"
      >
        {{ option.content }}
      </div>
      <img
        src="~@/assets/img/answer/btn_tj.png"
        alt=""
        @click="handleSubmit"
        class="btn-submit"
      />
    </div>

    <div v-show="corrent == '2'" class="subject-error-bg">
      <div class="subject-error">
        <img
          src="http://qiniu.whxgjt.com/dfh2/img_jx.png"
          alt=""
          class="img-js"
        />
        <div class="current-content">
          <div class="current-title">答案：{{ currentAnswer.answer }}</div>
          <div class="currenr-text"></div>
        </div>
        <div class="again-wrapper">
          <img
            src="~@/assets/img/answer/btn_again.png"
            alt=""
            @click="handleAgain"
            class="btn-again"
          />
        </div>
      </div>
      <img src="http://qiniu.whxgjt.com/dfh2/ip_03.png" alt="" class="ip-03" />
    </div>

    <img
      src="http://qiniu.whxgjt.com/dfh2/ip_01.png"
      alt=""
      v-show="corrent == ''"
      class="ip-01"
    />
    <img
      src="http://qiniu.whxgjt.com/dfh2/ip_02.png"
      alt=""
      v-show="corrent == '1'"
      class="ip-02"
    />

    <!-- 正确遮罩 -->
    <div v-show="corrent == '1'" @touchmove.prevent class="mask">
      <div class="mask-content fadeInBottom">
        <div v-if="!mistakeAddress">
          <img
            src="http://qiniu.whxgjt.com/dfh2/tq_06.png"
            alt=""
            class="mask-img"
          />
          <img
            src="~@/assets/img/answer/btn_yzk.png"
            alt=""
            @click="handleNext"
            class="btn-next"
          />
        </div>
        <div v-if="mistakeAddress">
          <img :src="imgSrc" alt="" class="mask-award-img" />
          <img
            src="~@/assets/img/drawAward/btn_sxlw.png"
            alt=""
            class="btn-next"
            @click="drawAward"
          />
        </div>
      </div>
    </div>

    <div class="footer">
      风险提示：本基金每份基金份额设3年锁定持有期，锁定期内不可赎回（红利再投不受此限）。本基金募集规模上限为80亿，超过将进行比例配售。投资本基金可能面临：市场风险，管理风险，流动性风险，操作风险，信用风险，技术风险，参与债券回购、国债期货、股指期货、股票期权的风险，参与融资的风险，投资资产支持证券面临的与基础资产相关的风险，投资港股及科创板股票而因投资标的、市场制度以及交易规则等差异带来的风险、投资存托凭证面临的与存托凭证的境外基础证券、境外基础证券的发行人及境内外交易机制相关的风险等特有风险以及其他风险。基金过往业绩不预示未来表现，管理人管理的其他基金业绩不构成本基金业绩的保证。基金有风险，投资需谨慎，请认真阅读《基金合同》、《招募说明书》及相关公告。本基金经管理人评估风险等级为R3，适合风险偏好C3及以上客户，代销机构的风险评级请以代销机构为准，请投资者根据风险承受能力购买相匹配的风险等级产品。基金产品由基金公司发行与管理，销售机构不承担产品的投资、兑付和管理责任。
    </div>
  </div>
</template>

<script>
import { WxShare } from "@/utils/wxConfig";
import { lottery } from "@/api/common";

export default {
  name: "Subject6",
  data() {
    return {
      corrent: "",
      correntIndexs: [0, 1, 2],
      subject:
        "东方红智选三年持有（A类：013294，C类：013295）首发来袭，猜猜以下哪几项正确？(多选)",
      options: [
        {
          content: "A. 它的六位靓号: A类013294，C类013295",
          checked: false,
        },
        {
          content: "B. 与它约定的见面日：10月18日",
          checked: false,
        },
        {
          content: "C. 陪伴它的一个完整周期：3年",
          checked: false,
        },
      ],
      currentAnswer: {
        answer: "ABC",
        analysis: "",
      },
      mistakeAddress: false,
      imgSrc: "",
      lottery: {
        1: "http://qiniu.whxgjt.com/dfh2/lw_01.png", // 东方小红抱枕
        2: "http://qiniu.whxgjt.com/dfh2/lw_02.png", // 东方小红超长鼠标垫
        3: "http://qiniu.whxgjt.com/dfh2/lw_03.png", // 东方小红手提袋（红）
        4: "http://qiniu.whxgjt.com/dfh2/lw_04.png", // 东方小红手提袋（黑）
        5: "http://qiniu.whxgjt.com/dfh2/lw_fxcg.png", // 东方小红徽章（随机款）
      },
    };
  },
  methods: {
    handleItem(option) {
      option.checked = !option.checked;
    },
    handleSubmit() {
      const result = [];
      this.options.forEach((item, index) => {
        item.corrent = this.correntIndexs.includes(index) ? "1" : "2";
        if (item.checked) {
          result.push(index);
        }
      });
      this.corrent =
        result.sort().toString() == this.correntIndexs.sort().toString()
          ? "1"
          : "2";
    },
    handleAgain() {
      this.corrent = "";
      this.options.map((item) => {
        item.checked = false;
        item.corrent = "";
        return item;
      });
    },
    async handleNext() {
      const openid = localStorage.getItem("openid");
      if (!openid) return;
      this.$showLoading();
      try {
        const res = await lottery({
          userId: openid,
          lotteryType: 1,
        });
        const data = res.data;
        if (data.errorCode === 0) {
          const rows = data.data;
          const isHaveAddress = rows.isHaveAddress;
          const lotteryStatus = rows.lotteryStatus;
          if (lotteryStatus == 1) {
            if (isHaveAddress) {
              this.$router.replace({
                path: "/drawAward",
                query: {
                  giftId: rows.giftId,
                },
              });
            } else {
              this.imgSrc = this.lottery[rows.giftId];
              this.mistakeAddress = true;
            }
          } else if (lotteryStatus == 2) {
            alert("你已经抽到过礼物啦~");
            this.$router.replace("/getRecord");
          } else if (lotteryStatus == 0) {
            alert("很遗憾没有抽中礼物~");
            this.$router.replace("/");
          } else if (lotteryStatus == 3) {
            alert("你来晚啦……礼物已经发放完啦~");
            this.$router.replace("/");
          } else {
            alert("你来晚啦……礼物已经发放完啦~");
            this.$router.replace("/");
          }
        } else {
          console.log(data);
        }
      } catch (e) {
        console.log(e);
      }
      this.$closeLoading();
    },
    drawAward() {
      this.$router.replace("/takeAddress");
    },
  },
  mounted() {
    WxShare();
  },
};
</script>

<style lang="scss" scoped>
.subject6 {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("http://qiniu.whxgjt.com/dfh2/bg_dt.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  position: relative;

  .subject-wrapper-bg {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 35px;
    .subject-bg {
      height: 396px;
    }
    .subject-title {
      width: 100%;
      margin: 11px 0 10px 12px;
      font-size: 20px;
      letter-spacing: 6px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #671d12;
      text-align: center;
      position: absolute;
      top: 0;
    }
  }

  .subject-error-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    .subject-error {
      width: 100%;
      text-align: center;
      position: absolute;
      top: 417px;
      .img-js {
        height: 182px;
      }
      .current-content {
        width: 100%;
        padding: 0 40px;
        text-align: left;
        color: #b0612d;
        position: absolute;
        top: 40px;
        box-sizing: border-box;
        .current-title {
          font-size: 15px;
          font-family: SourceHanSansCN;
          font-weight: 500;
        }
        .currenr-text {
          padding-top: 5px;
          font-size: 13px;
          font-family: SourceHanSansCN;
          font-weight: 500;
        }
      }
      .again-wrapper {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 20px;
        .btn-again {
          height: 33px;
        }
      }
    }
  }

  .subject-wrapper {
    .subject {
      margin: 5px 0 15px 0;
      font-size: 16px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #b0612d;
      line-height: 18px;
    }

    .option1 {
      width: 100%;
      min-height: 38px;
      padding: 10px 0 10px 8px;
      margin-bottom: 15px;
      font-size: 14px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #b0612d;
      border: 2px solid #ffe4d0;
      border-radius: 23px;
      background: #ffe4d0;
      box-sizing: border-box;
    }

    .option-true {
      width: 100%;
      color: #fff;
      background-image: url("~@/assets/img/answer/btn_true.png");
      background-repeat: no-repeat;
      background-position: right;
      background-size: cover;
      box-sizing: border-box;
    }

    .option-false {
      width: 100%;
      color: #fff;
      background-image: url("~@/assets/img/answer/btn_false.png");
      background-repeat: no-repeat;
      background-position: right;
      background-size: cover;
      box-sizing: border-box;
    }

    .option-checkd {
      background-image: url("~@/assets/img/answer/icon_true.png");
      background-repeat: no-repeat;
      background-position: 200px, 14px;
      background-size: 21px 16px;
      border: 2px solid #b0612d;
    }
  }

  .mask-award-img {
    height: 409px;
  }

  .ip-01 {
    width: 100%;
    height: 163px;
    position: absolute;
    top: 420px;
  }
  .ip-02 {
    width: 100%;
    height: 160px;
    position: absolute;
    top: 420px;
  }

  .footer {
    position: relative;
    font-size: 12px;
    padding: 10px 20px;
    margin-top: 580px;
    line-height: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
  }
}
</style>